\section{Storyboard}
\label{sec:storyboard}
%TODO Glenn

\begin{figure}[h!]
  \centering
  \subfloat[Homepagina]{\label{fig:strbd1}\includegraphics[width=0.3\textwidth]{img/storyboard/storyboard1}}                
  \subfloat[Vakpagina]{\label{fig:strbd2}\includegraphics[width=0.3\textwidth]{img/storyboard/storyboard2}}
  \subfloat[Vraagpagina]{\label{fig:strbd3}\includegraphics[width=0.3\textwidth]{img/storyboard/storyboard3}}
  \newline
  \subfloat[Documentenpagina]{\label{fig:strbd4}\includegraphics[width=0.3\textwidth]{img/storyboard/storyboard4}}                
  \subfloat[Leaderboard]{\label{fig:strbd5}\includegraphics[width=0.3\textwidth]{img/storyboard/storyboard5}}
  \subfloat[Profielpagina]{\label{fig:strbd6}\includegraphics[width=0.3\textwidth]{img/storyboard/storyboard6}}
\end{figure}

In deze sectie wordt ons storyboard toegelicht. Voor elk scherm van het originele storyboard wordt uitgelegd wat ons initi\"ele plan was, en wat er in de loop van het project veranderd is aan het originele plan.
\clearpage

\subsection{Homepagina}

\subsubsection*{Origineel}

Bovenaan links is er een uitklapbaar menu waarin men kan navigeren naar andere vakken, eventueel het uurrooster, instellingen,…
Bovenaan rechts worden de notificaties weergegeven. Als hierop geduwd wordt, dan klapt er een overzichtje uit, à la \cc{Facebook}.
Wat lager wordt de naam en foto van de gebruiker en zijn huidige totaal aantal punten weergeven.
In het midden van het scherm wordt een overzicht van alle recente activiteiten (nieuwe documenten, belangrijke mededelingen, nieuwe deadlines, twitterposts,…) weergegeven. Dit voor alle vakken waar de student is voor ingeschreven. Met het filter-icoontje rechtsboven het overzicht van activiteiten kan de gebruiker de items filteren.

\subsubsection*{Aanpassingen}

De homepagina is grotendeels hetzelfde gebleven. Enkel de notificaties en de filters zijn niet ge\"implementeerd. In de lijst van activiteiten is voor elke activiteit ook een knop bijgekomen om die items toe te voegen aan de todo-list.
In de HTML5 applicatie is er wel een filter-bar bovenaan de lijst van activiteiten. Als hierin getypt wordt, wordt de lijst van activiteiten onmiddellijk gefilterd met de zoekterm die getypt wordt.

\subsection{Vakpagina}

\subsubsection*{Origineel}

Op deze pagina wordt vak-specifieke informatie getoond. Bovenaan wordt de naam van het vak getoond. Daaronder het aantal punten dat de gebruiker verdiend heeft in dit vak. Als de gebruiker daarop klikt wordt hij naar de leaderboards van het vak gebracht (zie verder). Op het scherm zijn ook 3 knoppen aanwezig, één om een vraag te stellen, één om in te checken in een les en één om vanuit de applicatie te twitteren over het vak. In het midden van het scherm wordt, analoog zoals op het hoofdscherm, ook een stream van recente activiteiten weergegeven. In dit geval worden echter enkel activiteiten die relevant zijn voor het vak weergegeven.

\subsubsection*{Aanpassingen}

Ook de vakpagina's zijn grotendeels onveranderd gebleven, op de kleine aanpassingen na die ook voor de homepage gelden.

\subsection{Vraagpagina}

\subsubsection*{Origineel}

Dit scherm wordt getoond nadat de gebruiker een vraag geselecteerd heeft in de vragenlijst van het vak. Bovenaan wordt de vraag getoond. Daaronder de antwoorden, gerangschikt naar aantal ``+1's'' of  ``likes''. Een nieuwe vraag stellen gebeurt vanuit de vragenlijst.

\subsubsection*{Aanpassingen}

Het vraagscherm is volledig ge\"implementeerd zoals geschetst op het storyboard, zonder aanpassingen.

\subsection{Documentenpagina}

\subsubsection*{Origineel}
Per vak worden een aantal documenten bijgehouden. Voorlopig hebben we dit scherm nog niet in detail uitgewerkt. Het zal neerkomen op een soort \cc{File Browser} venster, zoals men er wel vaker tegenkomt. Hier kan de studenten bestanden afhalen (of \emph{syncen}, daar zijn we nog niet uit) en in een aparte map ook notities/samenvattingen/studiemateriaal uploaden.

\subsubsection*{Aanpassingen}

Dit scherm is helemaal niet ge\"implementeerd, omdat er vrij snel besloten was geen documentensysteem te verwerken in ons project.

\subsection{Leaderboard}

\subsubsection*{Origineel}

Op dit scherm wordt het leaderboard van een vak (of eventueel ook een algemeen leaderboard weergeven). Bovenaan worden de naam en het aantal punten van de gebruiker getoond. In het midden wordt het leaderboard zelf getoond. Daarop komen foto, naam en de score van de verschillende medegebruikers weergegeven. Eventueel zouden we ook “titels” of “rankings” aan gebruikers kunnen geven. Als de gebruiker op een medestudent klikt, wordt hij doorverwezen naar de profielpagina van die gebruiker.

\subsubsection*{Aanpassingen}

Leaderboards worden niet als apart scherm, maar als pop-up weergegeven. Op die pop-up wordt dan de top 10 gebruikers en hun score weergegeven. Titels en rankings hebben het, samen met het achievement-systeem, ook niet gehaald in ons project.

\subsection{Profielpagina}

\subsubsection*{Origineel}

Bovenaan worden naam en score van de gebruiker weergeven. In het midden van het scherm kan men achievements (eerste tab) en statistieken (tweede tab) van de gebruiker bekijken.

\subsubsection*{Aanpassingen}

Deze pagina is uiteindelijk niet ge\"implementeerd. Indien we achievements en statistieken van gebruikers zouden bijhouden, had deze pagina een nut gehad. Maar aangezien we deze informatie uiteindelijk niet bijhouden, is er niet veel dat er te tonen valt op deze pagina.
Eventueel hadden we op deze pagina kunnen tonen voor welke vakken de gebruiker is ingeschreven, en welke vragen/reacties/tweets de gebruiker had gepost.